Pfeile in SVG

Eingestellt am 31. Oktober 2022 um 11:20 Uhr » Medien und Informationen Netz-Notizen

Das manuelle Definieren von Pfeilen in SVG hält einige Tücken parat, die sich allerdings leicht verstehen lassen – man muss es nur einmal ausprobieren.

Pfeilspitzen werden generell mit dem marker-Element definiert. Neben der Breite und Höhe des Markers sind die Referenzpunkte zum Anschluss an den verwendenden Pfad wichtig:

Im ersten Fall haben die Marker den Referenzpunkt in der Mitte des Markers (5 bei einer Markergröße von 10), im zweiten Fall ist refX="0", also am linken Rand und im dritten Fall liegt der Referemzpunkt am rechten Rand.

Ich habe im Beispiel fill:context-stroke gewählt, damit die Marker transparent sind und der jeweilige Referenzpunkt identifiziert werden kann. Sowohl in Firefox als auch Microsoft Edge wird diese Eigenschaft derzeit nicht unterstützt (die Pfeile in obigem Beispiel sind leer und nicht gefüllt). Das lässt sich auch sehr gut an Hand eines Beispiels aus der offiziellen SVG2-Spezifikation zeigen:

Dargestellt wird das Beispiel allerdings mit entsprechend farbigen Pfeilen, denn in der verlinkten Datei ist nicht ein Marker für beide Pfeile definiert,

<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" 
    markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
    orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>
</marker>

sondern für beide Farben jeweils einer:

<marker id="Triangle1" viewBox="0 0 10 10" refX="1" refY="5" 
    markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
    orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" fill="crimson"/>
</marker>
<marker id="Triangle2" viewBox="0 0 10 10" refX="1" refY="5" 
    markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
    orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" fill="olivedrab"/>
</marker>

Es führt also derzeit leider kein Weg daran vorbei für jede Pfeilfarbe einen separaten Marker zu definieren.